<template>

  <section>
    <!--start 面包屑-->
    <div class="location">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{path:'/index'}">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{path:'/goods'}">商品</el-breadcrumb-item>
        <el-breadcrumb-item :to="{path:'/goods/tableGoodsList'}">商品收发汇总</el-breadcrumb-item>
        <el-breadcrumb-item>商品明细</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!--end 面包屑-->
    <!--start content-->
    <div class="content">
        <!--table表格   start-->
        <div class="mingxi-top">
        	<span>商品编码：P3313450209</span>
        	<span>商品名称：库存测试商品1</span>
        	<span>规格：P3313450209</span>
        	<span>仓库：漕河泾仓库</span>
        	<span>时段：2017.06.01—2017.06.19</span>
        </div>
        <div class="table-box" ref="contentWrap">
          <el-table
            :data="saleOrderViewVoTable"
            border
            style="width: 100%" :max-height="tableH">
            <el-table-column
              prop="orderCode"
              label="单号"
              align="center"
              min-width="150">
            </el-table-column>
            <el-table-column
              label="出/入库时间"
              width="180"
              align="center"
              prop="createDateStr">
            </el-table-column>
            <el-table-column
              prop="orderCode"
              label="交易类型"
              align="center"
              width="120">
            </el-table-column>
            <el-table-column
              label="入库"
              align="center" style="height: 50px;">
	            <el-table-column
	              label="数量"
	              width="120"
	              align="center"
	              prop="orderTotalMoney">
	            </el-table-column>
	             <el-table-column
	              label="单位成本"
	              width="120"
	              align="center"
	              prop="orderTotalMoney">
	            </el-table-column>
	            <el-table-column
	              label="成本金额"
	              width="120"
	              align="center"
	              prop="orderTotalMoney">
	            </el-table-column>
            </el-table-column>
            <el-table-column
              label="出库"
              align="center" style="height: 50px;">
	            <el-table-column
	              label="数量"
	              width="120"
	              align="center"
	              prop="orderTotalMoney">
	            </el-table-column>
	             <el-table-column
	              label="单位成本"
	              width="120"
	              align="center"
	              prop="orderTotalMoney">
	            </el-table-column>
	            <el-table-column
	              label="成本金额"
	              width="120"
	              align="center"
	              prop="orderTotalMoney">
	            </el-table-column>
            </el-table-column>
            <el-table-column
              label="结余"
              align="center" style="height: 50px;">
	            <el-table-column
	              label="数量"
	              width="120"
	              align="center"
	              prop="orderTotalMoney">
	            </el-table-column>
	             <el-table-column
	              label="单位成本"
	              width="120"
	              align="center"
	              prop="orderTotalMoney">
	            </el-table-column>
	            <el-table-column
	              label="成本金额"
	              width="120"
	              align="center"
	              prop="orderTotalMoney">
	            </el-table-column>
            </el-table-column>
            
          </el-table>
        </div>

        <!--table表格  end-->

        <!--分页  start-->
        <div class="block fen">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-sizes="[10,50, 100, 200]"
            :page-size="parseInt(pageSize)"
            :current-page="parseInt(totalPage)"
            layout="total, prev, pager, next, sizes,jumper"
            :total="parseInt(recordCount)">
          </el-pagination>
        </div>
        <!--分页  end-->

      </div>

    </div>
    <!--end content-->


  </section>

</template>
<script>
  export default {
    data() {
      return {
      	saleOrderViewVoTable:[],
		pageSize:'',				    // 每页条数
        form: {
          name: '',
          level: '',
          department: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: '',
          ddlistKey:'',   //付款状态
          memberName:'',  //客户名称
          createTime:'',		//下单时间
          fullTextFields:''	,
        },
        totalPage:'',					//当前页
        headerFoldBtn: true,
        recordCount:'',
        
      }
    },

    methods: {

      handleSizeChange(val) {
        this.pageSize= `${val}`;
				this.axios({
					method: 'post',
					url: "/v3/basic/members/list",
					data:{
						"limit":this.pageSize,
						"offset":(this.totalPage-1)*this.pageSize
					}
				}).then((res) => {
					this.tableData = res.data.list;
				}).catch((err)=>{
					this.Public.openError(this,err.response.data)
				});
      },
      handleCurrentChange(val) {
        this.totalPage=`${val}`;
        var supStartDate = "";
						var supEndDate = "";
						if(this.form.createTime != ""){
							var dateArray = this.form.createTime.splice(',');
							supStartDate = dateArray[0];
							supEndDate = dateArray[1];
						}
		   		   
		      	this.axios({
								method: 'post',
								url: "/v3/sale/order/queryFundMerchantListByPage",
								data:{
									"saleOrderViewVo.memberBname":this.form.memberName,
									//"saleOrderViewVo.orderPayState":orderPayState,
									"supStartDate":supStartDate,
									"supEndDate":supEndDate,
									"fullTextFields":this.form.fullTextFields,
									"limit":this.pageSize,
									"offset":(this.totalPage-1)*this.pageSize,
								}
							}).then((res) => {
									this.saleOrderViewVoTable = res.data.saleOrderViewVoList;
									this.orderTotalMoneySum=res.data.orderTotalMoneySum;
									this.orderPaidMoneySum=res.data.orderPaidMoneySum;
									this.orderUnpaidMoneySum=res.data.orderUnpaidMoneySum;
									this.recordCount =res.data.page.recordCount;    //一共几条数据
									this.pageSize=res.data.page.pageSize;			//每页显示多少条
									this.totalPage=res.data.page.pageNo;				//当前页码
									this.fullTextFields=" ";
									this.heightSearch = false;
							}).catch((err)=>{
								this.Public.openError(this,err.response.data)
							});
      },
		   queryFundMerchantListByPage(memberName,orderPayState,fullTextFields){
		   		  var supStartDate = "";
						var supEndDate = "";
						if(this.form.createTime != ""){
							var dateArray = this.form.createTime.splice(',');
							supStartDate = dateArray[0];
							supEndDate = dateArray[1];
						}
		   		   
		      	this.axios({
								method: 'post',
								url: "/v3/sale/order/queryFundMerchantListByPage",
								data:{
									"memberBname":this.form.memberName,
									"orderPayState":orderPayState,
									"supStartDate":supStartDate,
									"supEndDate":supEndDate,
									"fullTextFields":this.form.fullTextFields,
									"limit":this.pageSize,
									"offset":(this.totalPage-1)*this.pageSize,
								}
							}).then((res) => {
									this.saleOrderViewVoTable = res.data.list;
									this.orderTotalMoneySum=res.data.sumInfo.orderTotalMoneySum;
									this.orderPaidMoneySum=res.data.sumInfo.orderPaidMoneySum;
									this.orderUnpaidMoneySum=res.data.sumInfo.orderUnpaidMoneySum;
									this.recordCount =res.data.pageTools.recordCount;    //一共几条数据
									this.pageSize=res.data.page.pageTools.pageSize;			//每页显示多少条
									this.totalPage=res.data.page.pageTools.pageNo;				//当前页码
									this.fullTextFields=" ";
									this.heightSearch = false;
							}).catch((err)=>{
								this.Public.openError(this,err.response.data)
							});
			},

    },
    mounted(){
    	this.tableH = document.documentElement.clientHeight - 155;
//    this.$refs.contentWrap.style.height = (document.documentElement.clientHeight - 260) + 'px';
      window.onresize = () => {
        this.$refs.contentWrap.style.height = (document.documentElement.clientHeight - 260) + 'px';
      };

      	
      this.queryFundMerchantListByPage();
      
      
    }
  }
</script>
<style scoped>
.mingxi-top{
	margin-top: 5px;
}
.mingxi-top span{
	margin-right: 20px;
}
  .table-box {
    overflow-y: auto;
    margin-top: 20px;
    border-left:1px solid rgb(223, 234, 236);
    border-top:1px solid rgb(223, 234, 236);
  }

  .el-form {
    overflow: hidden;
  }

  .el-form .el-form-item:last-child {
    width: 100%;
  }

  .el-form-item {
    width: 485px;
    float: left;
    margin-right: 10px;
  }
  section {
    display: flex;
    flex-direction: column;
    flex: 1;

  }

  div.location {
    flex: 0 0 10px;
    padding: 3px 0 15px 0;
  }

  div.content {
    position: relative;
    flex: 1;
    width: 100%;
    background-color: #fff;
    box-sizing: border-box;
    padding: 15px;
  }
	.block{
		float: right;
	}
	.fen{
		margin-top: 20px;
	}
</style>
